<template>
  <div  class="m-2">
    <!-- 搜索区域  -->
    <searchFrom exportType="line_analyse" :searchInfo="searchInfo" :hasRoot="true" @confirmSearch="handleSearch" />

    <!-- 列表  -->
    <BasicTable @register="registerTable"  :pagination="{ pageSize: 100 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'categories_tree'">
          <div class="white-wrap font-sm" v-for="(i, n) in record.categories_tree">
            {{ i }}
            <Divider v-if="n < record.categories_tree.length - 1" style="border-color: #7cb305;margin: 3px 0;" dashed/>
          </div>
        </template>
        <template v-else-if="column.key === 'root_cate'">
          <div class="white-wrap font-sm" v-for="(i, n) in record.root_cate">
            {{ i }}
            <Divider v-if="n < record.root_cate.length - 1" style="border-color: #7cb305;margin: 3px 0;" dashed/>
          </div>
        </template>
        <template v-else-if="column.key === 'sj_name'">
          <Tag :bordered="false" color="red" class="white-wrap custom-title" @click="showProductInfo(record)">
            {{ record.sj_name }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'group_count'">
          <Tag :bordered="false" color="default" >
            {{ record.group_count }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'asin_count'">
          <Tag :bordered="false" color="processing">
            {{ record.asin_count }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'order_total'">
          <Tag :bordered="false" color="purple">
            {{ record.order_total }}
          </Tag>
        </template>
        <template v-else-if="column.key === 'current_desc'">
          <div v-for="i in record.current_desc" class="mb-6">
            <Tag :bordered="false" color="magenta">
              {{ i.name }}-<b>{{ i.order_num }}</b>(单)<b>({{ i.percent }})</b>
            </Tag>
          </div>
        </template>
        <template v-else-if="column.key === 'same_desc'">
          <div v-for="i in record.same_desc" class="mb-6">
            <Tag :bordered="false" color="volcano">
              {{ i.name }}-<b>{{ i.order_num }}</b>(单)<b>({{ i.percent }})</b>
            </Tag>
          </div>
        </template>
        <template v-else-if="column.key === 'same_percent'">
          <div v-for="i in record.same_percent" class="mb-6">
            <Tag :bordered="false" color="green">
              {{ i.name }}-<b>({{ i.percent }})</b>
            </Tag>
          </div>
        </template>
        <template v-else-if="column.key === 'last_desc'">
          <div v-for="i in record.last_desc" class="mb-6">
            <Tag :bordered="false" color="cyan">
              {{ i.name }}-<b>{{ i.order_num }}</b>(单)<b>({{ i.percent }})</b>
            </Tag>
          </div>
        </template>
        <template v-else-if="column.key === 'top_product'">
          <div class="text-left">
            <div v-for="i in record.top_product" class="mb-6">
              <Tag :bordered="false" color="geekblue">
                {{ i.group_name }}- <span class="font-bold cursor-pointer" @click="keepa_detail({'domain_id': record.domain_id, '_id': i.asin})">{{ i.asin }}</span>
              </Tag>
              <Tag color="orange"><b>{{ i.order_num }}</b>(单)</Tag>
            </div>
          </div>
        </template>
      </template>
    </BasicTable>
    <BasicModal
      @keepaDetail="keepa_detail"
      @register="register"
      :modalData="modalData"
      @visible-change="setModalData"
    />
  </div>
</template>

<script lang="ts" setup>
import {h} from 'vue';
import searchFrom from '/@/components/Custom/SearchFrom.vue'
import {Tag, Image, Divider, message} from 'ant-design-vue';
import {reactive, ref} from 'vue'
import {BasicTable, useTable, BasicColumn} from '/@/components/Table';
import {productLineTotalAnalyse, getProductBySjNameGroup} from "/@/api/demo/product";
import {useModal} from "/@/components/Modal";
import BasicModal from '/@/components/Custom/Modal.vue'

const columns: BasicColumn[] = [
  {
    title: '数据名(产品线)',
    dataIndex: 'sj_name',
    fixed: 'left',
    width: 180
  },
  {
    title: '根分类',
    dataIndex: 'root_cate',
    fixed: 'left',
    width: 210
  },
  {
    title: 'Amazon分类树',
    dataIndex: 'categories_tree',
    width: 300
  },
  {
    title: 'ASIN量(当前/同比/环比)',
    dataIndex: 'asin_count',
    width: 180
  },

  {
    title: '总单量(当前/同比/环比)',
    dataIndex: 'order_total',
    width: 180
  },
  {
    title: '头部ASIN产品',
    dataIndex: 'top_product',
    width: 280
  },
  {
    title: '组数量',
    dataIndex: 'group_count',
    width: 80
  },
  {
    title: '组单量及占比(当前)',
    dataIndex: 'current_desc',
    width: 240
  },
  {
    title: '组单量及占比(同比)',
    dataIndex: 'same_desc',
    width: 240
  },
  {
    title: '单量同比百分比',
    dataIndex: 'same_percent',
    width: 240
  },
  {
    title: '组单量及占比(环比)',
    dataIndex: 'last_desc',
    width: 240
  },
];
const [register, {openModal: openProductModal, setModalProps}] = useModal()
const searchInfo = reactive<Recordable>({
  domainId: '',
})
const modalData = ref([])

//关闭前清空模态框数据
function setModalData(visible) {
  if (!visible) {
    modalData.value = []
  }
}

const [registerTable, {reload}] = useTable({
  api: productLineTotalAnalyse,
  columns: columns,
  searchInfo: searchInfo,
  immediate: false,
  showIndexColumn: false,
  bordered: true,
  showTableSetting: false,
  pagination: {
    onChange: (page, pageSize) => {
      searchInfo.page = page
      searchInfo.pageSize = pageSize
    }
  },
});

/**
 * 查看数据名产品组内信息
 * @param detail
 */
function showProductInfo(detail) {
  var formState = {
    sj_name: detail['sj_name'],
    // catId: detail['category_id'],
    month_range: searchInfo.month_range,
    domainId: detail['domain_id'],
  }
  openProductModal()
  setModalProps({loading: true})
  getProductBySjNameGroup(formState).then(
    (res) => {
      var total_num = 0
      for (var i in res) {
        var item = res[i]
        total_num += item.group_count
      }
      modalData.value = {
        data: res,
        title: detail['sj_name'] + '(' + total_num + ')',
      }
      setModalProps({loading: false})
    },
    (error) => {
      console.log(error)
    },
  )
}

//确定筛选
function handleSearch(formData) {
  searchInfo.page = 1
  searchInfo.domainId = parseInt(formData.domainId)
  searchInfo.month_range = formData.month_range
  searchInfo.avg_num = parseInt(formData.avg_num)
  searchInfo.root_cate = formData.root_cate.trim()
  reload()
}

//根据月份与天数计算日均
function getDaysInMonth(month_str, orders): number {
  var month_arr = month_str.split('-')
  var year = parseInt(month_arr[0])
  var month = parseInt(month_arr[1])

  const date = new Date(year, month, 0);
  return (orders / date.getDate()).toFixed(2);
}

const keepa_detail = (item) => {
  const keepa_url = 'https://keepa.com/#!product/'
  var keepa_detail = item.domain_id + '-' + item._id
  window.open(keepa_url + keepa_detail, '_blank')
}

</script>

<style>
.font-sm {
  font-size: 13px;
}

.ant-table-body {
  max-height: 710px !important;
}

.mb-6 {
  margin-bottom: 4px;
}

.white-wrap {
  white-space: pre-wrap;
}

.custom-title {
  padding: 3px 1px;
  border-radius: 4px;
  width: 80%;
  margin: auto;
  cursor: pointer;
}
</style>
